<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗组件 - 组件演示</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../components/modal/modal.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🚀 openHarmony_Cordova_NutpiDesign</h1>
            <p class="subtitle">组件演示 - 弹窗组件</p>
        </header>

        <nav class="demo-nav">
            <a href="../index.html" class="nav-back">← 返回首页</a>
        </nav>

        <main class="main-content">
            <section class="demo-section">
                <h2>🎯 弹窗组件演示</h2>
                
                <div class="demo-buttons">
                    <button class="btn btn-primary" onclick="showDefaultModal()">默认弹窗</button>
                    <button class="btn btn-primary" onclick="showAlertModal()">提示框</button>
                    <button class="btn btn-primary" onclick="showConfirmModal()">确认框</button>
                    <button class="btn btn-primary" onclick="showSuccessModal()">成功提示</button>
                    <button class="btn btn-primary" onclick="showErrorModal()">错误提示</button>
                    <button class="btn btn-primary" onclick="showCustomModal()">自定义按钮</button>
                </div>
            </section>

            <section class="demo-section">
                <h2>使用代码</h2>
                <pre><code>// 1. 引入文件
&lt;link rel="stylesheet" href="components/modal/modal.css"&gt;
&lt;script src="components/modal/modal.js"&lt;/script&gt;

// 2. 创建弹窗
const modal = new Modal({
    title: '提示',
    content: '这是一个弹窗',
    type: 'default'
});

// 3. 打开弹窗
modal.open();

// 4. 关闭弹窗
modal.close();

// 快捷方法
Modal.alert('标题', '内容', () => {
    console.log('用户点击了确定');
});</code></pre>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 OpenHarmony 三方库适配中心 | MIT License</p>
        </footer>
    </div>

    <script src="../components/modal/modal.js"></script>
    <script>
        function showDefaultModal() {
            const modal = new Modal({
                title: '默认弹窗',
                content: '这是一个默认类型的弹窗。点击关闭按钮或遮罩可以关闭。',
                type: 'default',
                width: '450px'
            });
            modal.open();
        }

        function showAlertModal() {
            Modal.alert('提示', '这是一个提示框。用于显示简单的信息提示。', () => {
                console.log('用户点击了确定');
            });
        }

        function showConfirmModal() {
            Modal.confirm('确认删除', '确定要删除这条记录吗？删除后无法恢复。', () => {
                Modal.success('删除成功', '记录已成功删除');
            }, () => {
                Modal.alert('已取消', '删除操作已取消');
            });
        }

        function showSuccessModal() {
            Modal.success('操作成功', '您的操作已成功完成，感谢您的使用！', () => {
                console.log('用户点击了确定');
            });
        }

        function showErrorModal() {
            Modal.error('操作失败', '抱歉，操作失败。请检查网络连接后重试。', () => {
                console.log('用户点击了确定');
            });
        }

        function showCustomModal() {
            const modal = new Modal({
                title: '选择操作',
                content: '请选择要执行的操作',
                buttons: [
                    {
                        text: '保存',
                        type: 'primary',
                        onClick: () => {
                            Modal.success('已保存', '您的更改已保存');
                        }
                    },
                    {
                        text: '预览',
                        type: 'secondary',
                        onClick: () => {
                            Modal.alert('预览', '预览功能开发中...');
                        },
                        closeAfterClick: false
                    },
                    {
                        text: '取消',
                        type: 'secondary',
                        onClick: () => {
                            console.log('用户点击了取消');
                        }
                    }
                ],
                width: '500px'
            });
            modal.open();
        }
    </script>

    <style>
        .demo-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }

        .demo-buttons .btn {
            padding: 12px 16px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition);
        }

        .demo-buttons .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .demo-buttons {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            }
        }

        @media (max-width: 480px) {
            .demo-buttons {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>
